<template>
  <v-card flat class="QuoteList-Container rounded-lg">
    <List v-model="selectedValue" :list="propQuoteList">
      <template #menu-list-item>
        <v-list-item class="list-item" @click="openDeleteQuote">
          <v-list-item-title>
            <v-list-item-icon>
              <v-icon class="delete-icon icon">mdi-delete</v-icon>
            </v-list-item-icon>
            <span class="text"> Delete Quote </span>
          </v-list-item-title>
        </v-list-item>
        <v-list-item class="list-item" @click="openCopyQuote">
          <v-list-item-title>
            <v-list-item-icon>
              <v-icon class="icon">mdi-file-multiple</v-icon>
            </v-list-item-icon>
            <span class="text"> Copy Quote </span>
          </v-list-item-title>
        </v-list-item>
      </template>
      <template #item="{ item }">
        <v-list-item-content class="py-0">
          <v-list-item-title v-text="item.number"></v-list-item-title>

          <v-list-item-subtitle class="text--primary">
            {{ item.prospect }} - {{ item.prospectName }}
          </v-list-item-subtitle>

          <v-list-item-subtitle v-text="item.address"></v-list-item-subtitle>
        </v-list-item-content>

        <v-list-item-action class="my-0">
          <v-list-item-action-text>
            <v-chip
              text-color="#fff"
              :color="item.status === 'new' ? '#556282' : '#EB9B31'"
              x-small
              label
              v-text="item.status"
            >
            </v-chip
          ></v-list-item-action-text>
          <span> {{ item.quote }} </span>
        </v-list-item-action>
      </template>
    </List>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, Watch, ModelSync } from "vue-property-decorator";
import List from "@/components/List/List.vue";
import { IQuote, IQuoteDetails } from "@/components/Quotation/index";
@Component({
  components: {
    List,
  },
  props: {
    quoteList: {
      type: Array,
      default: () => [],
    },
  },
})
export default class QuoteList extends Vue {
  @ModelSync("selected", "input", { type: Number })
  selectedValue!: undefined | null | number;
  loading = false;
  get propQuoteList(): Array<IQuote> {
    return this.$props.quoteList;
  }

  openDeleteQuote() {
    if (this.selectedValue !== undefined && this.selectedValue !== null) {
      this.$emit("openDeleteQuoteDialog");
    } else {
      this.$Swal.fire({
        position: "center",
        icon: "warning",
        title: "Please select the quote you want to Delete",
        showConfirmButton: false,
        timer: 1500,
      });
    }
  }

  openCopyQuote() {
    if (this.selectedValue !== undefined && this.selectedValue !== null) {
      this.$emit("copyQuote");
    } else {
      this.$Swal.fire({
        position: "center",
        icon: "warning",
        title: "Please select the quote you want to Copy",
        showConfirmButton: false,
        timer: 1500,
      });
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./QuoteList.scss";
</style>
